<template>
  <div class="jiaochengitme">
      <div v-for="(v,i) in data" :key="i">
      <div>
      <img :src=v.imgurl>
    </div>
    <div>
      <p>{{v.title}}</p>
      <p>{{v.jieshu}}节 · {{v.xiaobiao}}人学习</p>
      <p><span>{{v.xiaobiao}}</span></p>
    </div>
    </div>
  </div>
</template>

<script>
export default {
props:["data"]
}
</script>

<style scoped>

.jiaochengitme>div{
    
    display: flex;
    justify-content: center;
    
}
.jiaochengitme>div>div:nth-child(1){
    width: 1rem;
    height: 1.1rem;
    margin-right: .1rem;
    border-radius: .1rem;
    overflow: hidden;
    margin: 0.1rem auto;
}
.jiaochengitme>div>div:nth-child(2){
    width: 2.15rem;
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(1){
    font-weight: bold;
    font-family: "微软雅黑";
}
.jiaochengitme>div>div:nth-child(1)>img{
   width: 1rem;
    height: 1.1rem;
  display: block;
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(2){
  
    font-family: "微软雅黑";
    font-size: .1rem;
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(3){
  
    font-family: "微软雅黑";
    font-size: .1rem;
    color: #707070;
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(4){
  
    font-family: "微软雅黑";
    font-size: .13rem;
    display: flex;
    justify-content: space-between;
   
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(4)>span:nth-child(1){
  color: #627ae6;
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(4)>span:nth-child(2){
    font-size: 0.10rem;
    color: #808080;
}
.jiaochengitme>div>div:nth-child(2)>p:nth-child(1)~p{
    margin-top: .1rem;
}
</style>